<html>
  <head>
    <script type="application/javascript">
      function draw() {
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

        var gradient = ctx.createLinearGradient(0, 0, 200, 0);
        gradient.addColorStop(0, "green");
        gradient.addColorStop(0.5, "yellow");
        gradient.addColorStop(1, "white");
        ctx.fillStyle = gradient;
        ctx.fillRect(10, 10, 200, 100);
      }
    </script>
  </head>
  <body onload="draw();">
    <canvas id="canvas" width="300" height="300"></canvas>
  </body>
</html>
